<template>
    <div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <el-form ref="ruleForm" :rules="rules" :model="form" label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="积分数量" size="mini" prop="score">
                            <el-input v-model="form.score" name="score">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" size="mini" prop="note">
                            <el-input v-model="form.note" name="note" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
        <div class="search">
            <el-form label-width="80px">
                <el-row>
                    <el-col :span="24" style="padding: 0 10px;margin-top: 5px;">
                        <el-row type="flex" justify="start">
                            <el-button size="small" type="primary" @click="recharge">充值积分</el-button>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="data-content1">
            <el-table v-loading="loading" :data="tableData.list" @sort-change="changeTableSort"
                style="width: 100%;font-size: 12px;">
                <el-table-column label="流水号" sortable="custom" prop="no" width="100">
                </el-table-column>
                <el-table-column label="交易前余额" sortable="custom" prop="preAmount" width="120">
                </el-table-column>
                <el-table-column label="交易金额" sortable="custom" prop="money" width="120">
                </el-table-column>
                <el-table-column label="交易后余额" sortable="custom" prop="afterAmount" width="120">
                </el-table-column>
                <el-table-column label="创建时间" sortable="custom" prop="date" width="160">
                </el-table-column>
                <el-table-column label="备注" prop="note">
                </el-table-column>
            </el-table>

            <div class="page">
                <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                    :page-size="tableData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
                    :page-count="tableData.totalPage" :total="tableData.total" @size-change="sizeChange"
                    @current-change="pageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import common from "@/mixins/common.js";

    export default {
        name: "dish_home",
        mixins: [common],
        data() {
            return {
                searchObject: {
                    no: 1,
                    size: 10,
                    name: "",
                },
                shopOptions: [],
                dialogVisible: false,
                defaultProps: {
                    children: "children",
                    label: "name",
                },
                loading: false,
                tableData: {},
                activeIndex: "1",
                form: {
                    score: '',
                    note: ''
                },
                rules: {
                    score: [{
                        required: true,
                        message: '请输入积分数量',
                        trigger: 'blur'
                    }],
                    note: [{
                        required: true,
                        message: '请填写备注',
                        trigger: 'blur'
                    }],
                }
            };
        },
        methods: {
            addView() {
                this.$router.push({
                    path: "/customer/add",
                });
            },
            recharge() {
                this.dialogVisible = true;
            },
            add() {
                var self = this;
                this.$refs["ruleForm"].validate(function (valid) {
                    if (valid) {
                        self.addData();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addData() {
                var self = this,
                    data = this.form;
                if (this.deforeAddData) {
                    this.deforeAddData();
                }
                this.postData("/tenantRest/customer/rechargeScore.htm", data, function (res) {
                    if (res.code == 0) {
                        self.$message({
                            message: '充值积分成功',
                            type: 'success'
                        });
                        self.getSearchList();
                        self.dialogVisible = false;
                        self.form.score = "";
                        self.form.note = "";
                    } else {
                        self.$message.error(res.msg);
                    }
                });
            },
            editView(row) {
                var data = {};
                data.id = row.id;
                this.$router.push({
                    path: "update",
                    query: data,
                });
            },
            handleSelect(event) {
                if (event === "1") {
                    this.searchObject.orderState = "";
                } else {
                    this.searchObject.orderState = event;
                }
                this.getSearchList();
            },
            getSearchList() {
                this.loading = true;
                var data = this.searchObject,
                    that = this;
                this.postData("/tenantRest/customer/scores.htm", data, function (result) {
                    if (result.code == 0) {
                        that.tableData = result;
                    }
                    setTimeout(function () {
                        that.loading = false;
                    }, 300);
                });
            },
            sizeChange(event) {
                this.searchObject.size = event;
                this.getSearchList();
            },
            pageChange(index) {
                this.searchObject.no = index;
                this.getSearchList();
            },
            search() {
                this.searchObject.no = 1;
                this.getSearchList();
            },
            clearData() {
                this.searchObject.shop = "";
                this.searchObject.name = "";
            },
            show(row) {
                var param = {};
                param.id = row.id;
                this.$router.push({
                    path: "/customer/view",
                    query: param,
                });
            },
            changeTableSort(column) {
                this.searchObject.sortField = column.prop;
                if ("descending" == column.order) {
                    this.searchObject.sortMethod = "desc";
                } else if ("ascending" == column.order) {
                    this.searchObject.sortMethod = "asc";
                } else {
                    this.searchObject.sortMethod = "";
                }
                this.getSearchList();
            },
            deleteData(event) {
                this.selectId = event.id;
                this.dialogVisible = true;
            },
            handleClose() {
                this.dialogVisible = false;
                var self = this;
                if (self.selectId) {
                    var params = {};
                    params.id = self.selectId;
                    this.postData("/tenantRest/customer/delete.htm", params, function (res) {
                        if (res.code == 0) {
                            self.$message({
                                message: '删除数据成功',
                                type: 'success'
                            });
                            self.getSearchList();
                        } else {
                            self.$message.error(res.msg);
                        }
                    });
                }
            },
        },
        mounted() {
            var id = this.$route.query.id;
            this.searchObject.user = id;
            this.form.user = id;
            this.getSearchList();
        },
    };
</script>

<style>
</style>